<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>灯光</title>
    <link rel="stylesheet" href="./lib/lightStyles.css" />

    <script type="text/javascript" src="./lib/aircity/ac_conf.js"></script>
    <script type="text/javascript" src="./lib/aircity/ac.min.js"></script>
    <script type="text/javascript" src="./lib/Vue3.js"></script>
  </head>
  <body>
    <div id="app">
      <div id="player" style="height: 100%"></div>
      <div class="tools">
        <div class="left">
          <p>Lighting Intensity</p>
          <div class="lights">
            <div
              :style="{ background: item.color }"
              :class="nowLight === item.leave ? ' isactive light' : 'light '"
              @click="setLight(item)"
              v-for="item in lightList"
              :key="item.leave"
            ></div>
          </div>
          <p>Lighting Color</p>
          <div class="colors">
            <div
              :style="{ background: item }"
              :class="nowColor === item ? 'color isactive' : 'color'"
              @click="setColor(item)"
              v-for="item in colorList"
              :key="item"
            ></div>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      // 按需获取
      const { createApp, ref } = Vue
      /**
       * 添加灯光
       */
      const addLight = async () => {
        let arr = []
        let lightId = []
        lightData.forEach((item, index) => {
          lightId.push('light_' + index)

          //点光源
          let o1 = {
            id: 'light_' + index, // 光源唯一标识
            type: 1, //光源类型: 1点光源 2聚光灯 3平面光
            coordinates: [item], //光源坐标位置 平面光位置是二维数组 两个点
            color: '#dd7423', //光源颜色
            coordinateType: 0, //坐标系类型：0投影 1经纬度
            rotation: [0, 0, 0], //光源角度
            intensity: 300, //光源亮度
            distance: 1000000, //光源可视距离
            attenuationRadius: 100000, //光源衰减半径
            castShadows: false, //是否开启阴影效果，当添加多个光源时非常耗性能 默认关闭
            automate: false //是否根据系统时间自动开关，默认值：true
          }
          arr.push(o1)
        })
        __g.light.add(arr, null)
      }
      /**
       * 设置光照强度
       */
      const setLight = val => {
        let lightArr = []
        lightData.forEach((item, index) => {
          //点光源
          let o1 = {
            id: 'light_' + index, // 光源唯一标识
            intensity: val.leave * 400
          }
          lightArr.push(o1)
        })
        __g.light.update(lightArr)
      }
      /**
       * 灯光位置信息
       */
      const lightData = [
        [8032.712265625, 4650.2972265625, 14],
        [8035.88525390625, 4659.83349609375, 14],
        [8039.7953515625, 4672.265224609375, 14],
        [8041.97880859375, 4680.0412109375, 13],
        [8043.84, 4687.3815625, 12],
        [8046.4400000000005, 4695.500625, 15],
        [8047.64, 4702.205, 15],
        [8051.490410156251, 4709.355859375, 16],
        [8053.2, 4714.9575, 14],
        [8061.4400000000005, 4743.9640625, 16],
        [8064.28, 4753.4315625, 14],
        [8066.72, 4762.9021875, 16],
        [8041.64, 4678.3346875, 20.426953125],
        [8048.76, 4712.189062500001, 16.20818359375],
        [8057.16, 4727.76875, 16.65396484375],
        [8057.4800000000005, 4745.8865625, 15.16763671875],
        [8066.12, 4778.6796875, 15.873779296875],
        [8035.64, 4712.7059375, 34.81650390625],
        [8037.64, 4718.8721875, 34.73310302734375],
        [8041.4400000000005, 4743.745, 29.515029296875],
        [7983.6, 4775.135625, 11.2408544921875],
        [8057.88, 4783.1831250000005, 8.96875]
      ]
      /**
       * 灯光强度
       */
      const lightList = ref([
        { color: 'rgba(255, 255, 255, 0.1)', leave: 1 },
        { color: 'rgba(255, 255, 255, 0.2)', leave: 2 },
        { color: 'rgba(255, 255, 255, 0.3)', leave: 3 },
        { color: 'rgba(255, 255, 255, 0.4)', leave: 4 },
        { color: 'rgba(255, 255, 255, 0.5)', leave: 5 },
        { color: 'rgba(255, 255, 255, 0.6)', leave: 6 },
        { color: 'rgba(255, 255, 255, 0.7)', leave: 7 },
        { color: 'rgba(255, 255, 255, 0.8)', leave: 8 },
        { color: 'rgba(255, 255, 255, 0.9)', leave: 9 },
        { color: 'rgba(255, 255, 255, 1)', leave: 10 }
      ])
      /**
       * 灯光颜色
       */
      const colorList = ref(
        [
          '#c02916',
          '#dd7423',
          '#e59c27',
          '#f2c52e',
          '#fcef36',
          '#9fc12e',
          '#76ab28',
          '#3d9278',
          '#3998ec',
          '#fff'
        ].reverse()
      )
      /**
       * 设置灯光颜色
       */
      const setColor = val => {
        let lightArr = []
        lightData.forEach((item, index) => {
          //点光源
          let o1 = {
            id: 'light_' + index, // 光源唯一标识
            color: val //光源颜色
          }
          lightArr.push(o1)
        })
        __g.light.update(lightArr)
      }
      const nowColor = ref()
      const nowLight = ref()
      /**
       * 初始化三维
       * @constructor
       */
      const OnLoad = () => {
        const __DigitalTwinPlayer = new DigitalTwinPlayer(HostConfig.Player, {
          domId: 'player',
          apiOptions: {
            onReady: function () {
              __g.camera.set([
                8118.918525, 4621.300605, 57.818159, -19.704556, -140.836472, 1
              ])
              __g.weather.setDateTime(2020, 6, 9, 20, 30, false)
              addLight()
            },
            onEvent: function (event) {
              const eventType = event.eventtype
              console.log('onEvent', event)
              switch (eventType) {
                case 'LeftMouseButtonClick':
                  console.log(
                    '触发事件类型：鼠标左键单击，eventType：' + eventType
                  )
                  break
                default:
                  break
              }
            }
          }
        })
      }

      /**
       * 自适应分辨率
       * @returns {Promise<void>}
       */
      const onResize = async () => {
        let playerView = document.getElementById('player')
        playerView.style.height = window.innerHeight + 'px'
        playerView.style.width = window.innerWidth + 'px'
      }
      // vue挂载
      const app = createApp({
        setup() {
          // 页面加载调用
          window.addEventListener('load', OnLoad, true)
          // 页面窗口变换调用
          window.addEventListener('resize', onResize, true)
          //页面离开事件(离开时清除此页面的操作及重置场景)
          window.onunload = function (e) {
            // 重置场景
            fdapi.reset(1 | 2 | 4)
            __g.weather.setDateTime(2023, 6, 25, 8, 35, false)
          }
          return {
            addLight,
            lightList,
            colorList,
            setLight,
            setColor,
            nowLight,
            nowColor
          }
        }
      })
      app.mount('#app')
    </script>
  </body>
</html>
